<template>
  <div class="comment">
		<h3>评论</h3>
		<p class="no-comment" v-if="commentlist.length==0">暂无评论，我来发表第一个评论！</p>
		<div v-else>
			<div class="comment-body" v-for="(item,index) in commentlist" :index="index">
        <i>
           {{commentlist.length - index}}#
        </i>
				<span class="content-title">
          {{item.name}}
          <span>
            ( {{item.time}} )
          </span>
          <span class="os" v-html="osParse(item.agent)" v-if="item.agent"></span>
          &nbsp;
          <span class="ua" v-html="uaParse(item.agent)" v-if="item.agent"></span>
        </span>
        <p class="content">
          {{item.content}}
          <span class="replyBtn" @click="changeCommenter(item.name,index,`${commentlist.length - index}#`, item._id)">回复</span>
        </p>
				<div v-if="item.reply.length > 0">
					<div class="reply" v-for="(reply, ii) in item.reply">
            <i>
              {{commentlist.length - index}}-{{item.reply.length - ii}}
            </i>
						<span class="content-title">
              {{reply.responder}}&nbsp;&nbsp;
              <span>
                回复
              </span>
              &nbsp;&nbsp;{{reply.reviewers}}
              <span>( {{reply.time}} )</span>
              <span class="os" v-html="osParse(reply.agent)" v-if="reply.agent"></span>
              &nbsp;
              <span class="ua" v-html="uaParse(reply.agent)" v-if="reply.agent"></span>
            </span>
            <p>
              {{reply.content}}
              <span class="replyBtn" @click="changeCommenter(reply.responder,index, (commentlist.length - index) + '-' + (item.reply.length - ii), item._id)">回复</span>
            </p>
					</div>
				</div>
			</div>
		</div>
    <div class="comment-reply" ref="commentReply">
  		<h3>发表评论</h3>
  		<!-- <b v-if="type">你回复&nbsp;{{oldComment}}</b> -->
      <!-- <p class="commentInput">
        <span class="commentName" >昵称：</span><input type="text" v-model="commentName" placeholder="请输入昵称">
        <span>联系方式：</span><input type="text" v-model="commentContact" placeholder="只对作者可见">
      </p> -->
      <p>
        <textarea value="请填写评论内容" :placeholder="placeholder" v-model="commentText"></textarea>
      </p>
  		<button class="btn" @click="addComment">发表</button>
  		<button class="btn" @click="canelComment">取消</button>
  	</div>
  </div>
</template>

<script>
import { parseTime } from 'common/utils/formatTime'
import { uaParse, osParse } from 'common/utils/comment-ua-parse'
export default {
  name: 'comment',
  data() {
    return {
      // commentName: '',
      // commentContact: '',
      commentText: '',
      type: 0, // 0为评论作者 1为评论别人的评论 2为评论别人的别人
      oldComment: null,
      chosedIndex: -1,
      placeholder: '@他们',
      commentlist: []
    }
  },
  props: {
    articleid: {
      type: String,
      default: ''
    }
  },
  created() {
    this.getComment()
  },
  watch: {
    articleid() {
      this.getComment()
    }
  },
  methods: {
    uaParse,
    osParse,
    getComment() {
      this.$store.dispatch('GetComment', this.articleid).then((res) => {
        if (res.commentlist.length === 0) {
          this.isFirstAdd = true
        } else {
          this.isFirstAdd = false
          this.commentlist = res.commentlist
        }
      })
    },
    addComment() {
      // if (this.commentName.trim().length === 0) {
      //   this.$toast('昵称是必须的')
      //   return false
      // }
      // if (this.commentName.trim().length > 12) {
      //   this.$toast('昵称太长了')
      //   return false
      // }
      if (this.commentText.trim().length === 0) {
        this.$toast('没有填写内容')
        return false
      }
      let params
      if (this.isFirstAdd) {
        // 第一次添加
        params = {
          articleid: this.articleid,
          commentlist: [{
            name: '于梦中760042201@qq.com(作者)',
            contact: '760042201@qq.com',
            agent: navigator.userAgent,
            time: parseTime(),
            content: this.commentText.trim(),
            reply: []
          }]
        }
        this.$store.dispatch('AddComment', params).then((res) => {
          this.commentlist.unshift(res)
          this.commentText = ''
          this.isFirstAdd = false
        })
      } else {
        // 已存在，更新就好
        if (this.type === 0) {
          params = {
            articleid: this.articleid,
            type: 0,
            commentItem: {
              name: '于梦中760042201@qq.com(作者)',
              contact: '760042201@qq.com',
              agent: navigator.userAgent,
              time: parseTime(),
              content: this.commentText.trim(),
              reply: []
            }
          }
        } else if (this.type === 1) {
          params = {
            articleid: this.articleid,
            commentid: this.commentid,
            type: 1,
            replyItem: {
              responder: '于梦中760042201@qq.com(作者)',
              contact: '760042201@qq.com',
              agent: navigator.userAgent,
              reviewers: this.oldComment + ' ( ' + this.location + ' )',
              time: parseTime(),
              content: this.commentText.trim()
            }
          }
          this.type = 0
          this.placeholder = '添加评论'
        }

        this.$store.dispatch('UpdateComment', params).then((res) => {
          this.commentText = ''
          this.getComment()
        })
      }
    },
    changeCommenter(name, index, location, commentid) {
      this.commentText = ''
      this.placeholder = '@' + name + ' ( ' + location + ' )'
      this.location = location
      this.commentid = commentid
      this.oldComment = name
      this.chosedIndex = index
      this.type = 1
      this.$refs.commentReply.scrollIntoView()
    },
    canelComment() {
      this.commentText = ''
      this.placeholder = '添加评论'
      this.type = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.comment {
  overflow: hidden;
  // border-radius: 5px;
  // font-size: 14px;
  // margin-left: 10px;
  // border: 1px solid #ccc;
  // background: #f1f1f1;
  .no-comment {
    height: 40px;
    text-align: center;
    font-size: 20px;
    color: #666;
  }
  h3 {
    margin-top: 0;
    margin-bottom: 0;
    padding: 8px 15px;
    border-radius: 5px 5px 0 0;
    text-align: left;
    color: #333;
    font-size: 16px;
    background: rgba(255,255,255,0.9);
  }
  .comment-body {
    padding: 10px 2em 10px 10px;
    .content {
      margin: 8px 0px;
      text-indent: 2em;
    }
    .content-title {
      color:#084e3a;
      font-size:15px;
      font-weight: bold;
      .os, .ua {
        font-size:12px;
      }
      span {
        color:#333;
        font-size:14px;
      }
      p {
        font-size:16px;
        color:#333;
      }
    }
    .reply {
      margin-left: 2em;
      padding-top: 5px;
      border-top: 1px solid rgba(0,0,0,0.3);
      p {
        margin: 4px 0px;
        line-height: 20px;
        margin-left: 2em;
      }
    }
    + .comment-body {
      border-top: 1px solid #ccc;
    }
  }
  .replyBtn {
    margin-left: 10px;
    padding: 3px 5px;
    color: #555;
    cursor: pointer;
  }
  .comment-reply {
    margin-top: 10px;
    p {
      padding: 0 10px;
      margin: 16px 0;
      textarea {
        width: 100%;
        height: 95px;
        outline: none;
        resize: vertical;
        box-sizing: border-box;
        border-radius: 3px;
        border-color: #666;
        background: transparent;
      }
    }
    .commentInput {
      .commentName {
        position: relative;
        padding-left: 12px;
        &::after {
          content: "*";
          font-size: 24px;
          position: absolute;
          left: 0;
          color: #ff4949;
        }
      }
    }
    button {
      float:right;
      margin: 10px 10px 10px 20px;
      padding:5px 30px;
      border-radius:5px;
      background:#084e3a;
      color:#fff;
      outline: none;
      border: none;
      font-size:16px;
      &:hover {
        color:#fff;
        background:#05805d;
      }
    }
  }
}
</style>
